<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>发送 GET 请求</title>
    </head>
    <body>
        <button>点击发送 AJAX 请求</button>
        <script>
            //获取按钮
            let btn = document.querySelector("button");

            //绑定单击事件
            btn.onclick = function () {
                //AJAX 操作
                //1. 创建请求对象  标识符要求
                let xhr = new XMLHttpRequest();

                //2. 初始化  open 打开   get  post
                xhr.open("get", "http://127.0.0.1/server");

                //3. 发送
                xhr.send();

                //4. 绑定事件 处理响应结果
                // on  when 当....时候
                // readyState  是 xhr 对象中的一个属性 0 1 2 3 4
                // 0   xhr 对象刚刚创建
                // 1   xhr.open 已经调用  初始化完成
                // 2   xhr.send 已经调用  发送完成
                // 3   部分结果已经接受
                // 4   所有结果已经接受
                xhr.onreadystatechange = function () {
                    //表明所有结果都已经返回
                    if(xhr.readyState === 4){
                        //结果
                        //响应状态码
                        console.log(xhr.status);
                        //响应状态字符串
                        console.log(xhr.statusText);
                        //响应头
                        console.log(xhr.getAllResponseHeaders());
                        //响应体
                        console.log(xhr.response);
                    }
                };
            };
        </script>
    </body>
</html>
